<template>
	<div>
		<el-drawer :visible.sync="drawer" direction="btt" size="80%" :withHeader="false">
			<div class="drawer_box">
				<div class="drawer_title">实付金额：<span>$10.00</span></div>
				<div class="card_flex">
					<div>应付金额: <span>$9.00</span></div>
					<div>使用积分抵扣: <span>$1.00</span></div>
				</div>
				<div class="card_title">
					<img src="../../../../assets/static/recharge/q4.png" alt="" />
					<div>当金额低于</div>
				</div>
				<div class="drawer_radio">
					<div @click="radioIndex = 1">
						<div>
							<img src="../../../../assets/static/choosePay/1.png">
							<div>零钱支付</div>
						</div>
						<img v-if="radioIndex == 1" src="../../../../assets/static/choosePay/3.png">
					</div>
					<div @click="radioIndex = 2">
						<div>
							<img src="../../../../assets/static/choosePay/2.png">
							<div>零钱支付</div>
						</div>
						<img v-if="radioIndex == 2" src="../../../../assets/static/choosePay/3.png">
					</div>
				</div>
				<div class="integral">
					<div>
						<div><el-checkbox v-model="checked">使用积分</el-checkbox></div>
						<div><el-input v-model="input" placeholder="输入使用积分"></el-input></div>
					</div>
					<div class="deduction">抵扣：<span>$0.00</span></div>
				</div>
				<div class="integral_info">使用积分抵扣（当前账户积分余额 <span>2,000 </span>)</div>
				<div class="goPay">去支付</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				drawer: false,
				radioIndex: 1,
				checked: '',
				input: '',
			}
		},
		methods: {
			show() {
				this.drawer = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drawer_box {
		margin: 15px;

		.drawer_title {
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			margin: 23px 0;

			span {
				color: #64BD1F;
			}
		}

		.card_flex {
			display: flex;
			justify-content: space-between;
			padding: 12px;
			border: #CBCBCB solid 1px;
			font-size: 12px;
			border-radius: 10px;

			span {
				color: #64BD1F;
			}
		}

		.card_title {
			margin: 15px 0;
			display: flex;
			align-items: center;
			font-size: 14px;
			font-weight: bold;

			img {
				width: 2.5px;
				height: 12.5px;
			}

			>div {
				margin-left: 8px;
			}
		}

		.drawer_radio {
			>div {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 0;
				border-bottom: #CBCBCB solid 1px;

				img {
					width: 28px;
				}

				>div {
					display: flex;
					align-items: center;
					font-size: 12px;
					font-weight: bold;

					img {
						width: 30px;
					}
				}
			}

			>div:first-child {
				border-top: #CBCBCB solid 1px;
			}
		}

		.integral {
			padding: 10px 0;
			border-bottom: #CBCBCB solid 1px;
			>div:nth-child(1) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				>div:nth-child(1){
					margin-right: 18px;
				}
			}
			.deduction{
				text-align: right;
				margin-top: 10px;
				font-size: 12px;
				color: #999;
				span{
					color: #FFB300;
				}
			}
		}
		.integral_info{
			text-align: center;
			font-size: 14px;
			font-weight: bold;
			margin: 20px 0 15px 0;
			span{
				color: #FFB300;
			}
		}
		.goPay{
			background-image: url(../../../../assets/static/choosePay/4.png);
			width: 294px;
			margin: auto;
			padding: 25px 0 35px 0;
			text-align: center;
			color: #FFFFFF;
			font-size: 14px;
			font-weight: bold;
		}
	}
</style>
<style type="text/css">
	.el-drawer__open .el-drawer.btt {
		border-radius: 10px 10px 0 0 !important;
	}
</style>
